<template>
  <el-dialog v-if="visible" :append-to-body="true" :visible.sync="visible" :title="title" width="540px" :before-close="cancel">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="125px">
      <el-form-item label="所属服务商" prop="serviceproviderId">
        <el-select v-model="form.serviceproviderId" placeholder="所属服务商" :disabled="type === 'detail'">
          <el-option v-for="(item,index) in serviceproItem" :key="index" :label="item.seproName" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" :disabled="type === 'detail'" placeholder="请输入姓名" />
      </el-form-item>
      <!--
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" :disabled="type === 'detail'" maxlength="11" placeholder="请输入账号" />
      </el-form-item>-->
      <el-form-item label="手机号" prop="cellphone">
        <el-input v-model="form.cellphone" :disabled="type === 'detail'" placeholder="请输入手机号" maxlength="11" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button size="small" :loading="loading" :disabled="type === 'detail'" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { isvalidPhone } from '@/utils/validate';
import { addManager, editManager } from '@/api/tServiceproviderPerson';
import request from '@/utils/request'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String, // detail 详情 edit编辑 add 添加
      default: 'detail'
    }
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'));
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'));
      } else {
        callback();
      }
    };
    return {
      serviceproItem: [],
      loading: false,
      form: {
        name: '',
        username: '',
        cellphone: '',
        serviceproviderId: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        cellphone: [{ required: true, trigger: 'blur', validator: validPhone }],
        serviceproviderId: [{ required: true, trigger: 'blur', message: '请选择服务商' }]
      }
    };
  },
  computed: {
    title() {
      return this.type === 'detail' ? '详情' : this.type === 'add' ? '新增管理员' : '编辑管理员';
    }
  },
  watch: {
    data(newVal) {
      if (newVal) {
        this.form = { ...newVal };
      }
    }
  },
  mounted() {
    this.tServiceproviderInfoAll()
  },
  methods: {
    tServiceproviderInfoAll() {
      request({
        url: 'api/tServiceproviderInfoAll',
        method: 'get'
      }).then(res => {
        this.serviceproItem = res
      })
    },
    cancel() {
      this.$emit('cancel');
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.type === 'add') {
            addManager(this.form)
              .then((res) => {
                this.loading = false;
                this.resetForm();
                this.cancel();
                this.$parent.page = 0;
                this.$parent.init();
                this.$message.success('添加成功');
              })
              .catch((_) => {
                this.loading = false;
              });
          } else {
            editManager(this.form)
              .then((res) => {
                this.loading = false;
                this.resetForm();
                this.cancel();
                this.$parent.page = 0;
                this.$parent.init();
                this.$message.success('添加成功');
              })
              .catch((_) => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['form'].resetFields();
      this.form = {
        name: '',
        username: '',
        cellphone: ''
      };
    }
  }
};
</script>

<style scoped>
.input_text {
  width: 300px;
}
</style>
